<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>icon.ico">
    <title><%= VUE_APP_TITLE %></title>
    <style>
      html, body, #app { height: 100%; margin: 0px; padding: 0px; }
      .d2-home { background-color: #303133; height: 100%; display: flex; flex-direction: column; }
      .d2-home__main { user-select: none; width: 100%; flex-grow: 1; display: flex; justify-content: center; align-items: center; flex-direction: column; }
      .d2-home__footer { width: 100%; flex-grow: 0; text-align: center; padding: 1em 0; }
      .d2-home__footer > a { font-size: 12px; color: #ABABAB; text-decoration: none; }
      .d2-home__loading { height: 32px; width: 32px; margin-bottom: 20px; }


      
.diydiv {
    position: absolute;
    transform-style: preserve-3d;
  }

.assembly {
    top: 50%;
    left: 50%;
    transform: rotateX(-45deg) rotateY(-45deg);
  }
  
  .comp-3d {
    animation: r 2s ease-in-out infinite;
  }
  .comp-3d--i {
    animation-name: ri;
  }
  .comp-3d--o {
    animation-name: ro;
  }
  
  @keyframes ri {
    0%, 20% {
      transform: rotateY(-0.5turn);
    }
    50% {
      transform: none;
    }
    100%, 80% {
      transform: rotateX(-0.5turn);
    }
  }
  @keyframes ro {
    0%, 35% {
      transform: rotate(-0.5turn);
    }
    65%, 100% {
      transform: none;
    }
  }
  .pos:nth-child(1) {
    transform: scale3d(1, 1, 1) translate3d(4em, 4em, 4em);
  }
  
  :not(.pos) > .cube:nth-child(1) {
    transform: translate3d(-4em, -4em, 0em);
  }
  
  .pos:nth-child(2) {
    transform: scale3d(1, 1, -1) translate3d(4em, 4em, 4em);
  }
  
  :not(.pos) > .cube:nth-child(2) {
    transform: translate3d(-4em, 0em, -4em);
  }
  
  :not(.pos) > .cube:nth-child(3) {
    transform: translate3d(-4em, 0em, 0em);
  }
  
  :not(.pos) > .cube:nth-child(4) {
    transform: translate3d(-4em, 0em, 4em);
  }
  
  .pos:nth-child(3) {
    transform: scale3d(1, -1, 1) translate3d(4em, 4em, 4em);
  }
  
  :not(.pos) > .cube:nth-child(5) {
    transform: translate3d(-4em, 4em, 0em);
  }
  
  .pos:nth-child(4) {
    transform: scale3d(1, -1, -1) translate3d(4em, 4em, 4em);
  }
  
  :not(.pos) > .cube:nth-child(6) {
    transform: translate3d(0em, -4em, -4em);
  }
  
  :not(.pos) > .cube:nth-child(7) {
    transform: translate3d(0em, -4em, 0em);
  }
  
  :not(.pos) > .cube:nth-child(8) {
    transform: translate3d(0em, -4em, 4em);
  }
  
  :not(.pos) > .cube:nth-child(9) {
    transform: translate3d(0em, 0em, -4em);
  }
  
  :not(.pos) > .cube:nth-child(10) {
    transform: translate3d(0em, 0em, 0em);
  }
  
  :not(.pos) > .cube:nth-child(11) {
    transform: translate3d(0em, 0em, 4em);
  }
  
  :not(.pos) > .cube:nth-child(12) {
    transform: translate3d(0em, 4em, -4em);
  }
  
  :not(.pos) > .cube:nth-child(13) {
    transform: translate3d(0em, 4em, 0em);
  }
  
  :not(.pos) > .cube:nth-child(14) {
    transform: translate3d(0em, 4em, 4em);
  }
  
  .pos:nth-child(5) {
    transform: scale3d(-1, 1, 1) translate3d(4em, 4em, 4em);
  }
  
  :not(.pos) > .cube:nth-child(15) {
    transform: translate3d(4em, -4em, 0em);
  }
  
  .pos:nth-child(6) {
    transform: scale3d(-1, 1, -1) translate3d(4em, 4em, 4em);
  }
  
  :not(.pos) > .cube:nth-child(16) {
    transform: translate3d(4em, 0em, -4em);
  }
  
  :not(.pos) > .cube:nth-child(17) {
    transform: translate3d(4em, 0em, 0em);
  }
  
  :not(.pos) > .cube:nth-child(18) {
    transform: translate3d(4em, 0em, 4em);
  }
  
  .pos:nth-child(7) {
    transform: scale3d(-1, -1, 1) translate3d(4em, 4em, 4em);
  }
  
  :not(.pos) > .cube:nth-child(19) {
    transform: translate3d(4em, 4em, 0em);
  }
  
  .pos:nth-child(8) {
    transform: scale3d(-1, -1, -1) translate3d(4em, 4em, 4em);
  }
  
  .pos .cube {
    animation: m 2s ease-out infinite;
  }
  .cube__face {
    margin: -2em;
    width: 4em;
    height: 4em;
    box-shadow: 0 0 2em rgba(220, 220, 220, 0.5) inset;
    background: whitesmoke;
  }
  .cube__face:nth-child(2n) {
    filter: brightness(0.97);
  }
  .cube__face:nth-child(n + 5) {
    filter: brightness(1.03);
  }
  .cube__face:nth-child(1) {
    transform: rotateY(0deg) translateZ(2em);
  }
  .cube__face:nth-child(2) {
    transform: rotateY(90deg) translateZ(2em);
  }
  .cube__face:nth-child(3) {
    transform: rotateY(180deg) translateZ(2em);
  }
  .cube__face:nth-child(4) {
    transform: rotateY(270deg) translateZ(2em);
  }
  .cube__face:nth-child(5) {
    transform: rotateX(90deg) translateZ(2em);
  }
  .cube__face:nth-child(6) {
    transform: rotateX(-90deg) translateZ(2em);
  }
  
  @keyframes m {
    0%, 5%, 95%, 100% {
      transform: none;
    }
    15% {
      transform: translate3d(0, 4em, 0);
    }
    25% {
      transform: translate3d(0, 4em, 4em);
    }
    35%, 65% {
      transform: translate3d(4em, 4em, 4em);
    }
    75% {
      transform: translate3d(4em, 0, 4em);
    }
    85% {
      transform: translate3d(4em, 0, 0);
    }
  }
    </style>
    <!-- <script>
      var _hmt = _hmt || [];
      var hmid = "bc38887aa5588add05a38704342ad7e8";
      (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?" + hmid; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();
    </script> -->
  </head>
  <body>
    <noscript>
      <strong>
        Sorry, 广州快影 will not work properly without JavaScript support. Enable JavaScript for browsers and continue.
      </strong>
    </noscript>
    <div id="app">
      <div class="d2-home">
        <div class="d2-home__main">
           <div style="width: 100vw;height: 100vh;perspective: 32em;background: whitesmoke;position: relative;">
            <div class="assembly diydiv">
              <div class="comp-3d comp-3d--i diydiv">
                <div class="cube diydiv">
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                </div>
                <div class="cube diydiv">
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                </div>
                <div class="cube diydiv">
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                </div>
                <div class="cube diydiv">
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                </div>
                <div class="cube diydiv">
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                </div>
                <div class="cube diydiv">
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                </div>
                <div class="cube diydiv">
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                </div>
                <div class="cube diydiv">
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                </div>
                <div class="cube diydiv">
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face"></div>
                </div>
                <div class="cube diydiv">
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                </div>
                <div class="cube diydiv">
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                </div>
                <div class="cube diydiv">
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                </div>
                <div class="cube diydiv">
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                </div>
                <div class="cube diydiv">
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                </div> 
                <div class="cube diydiv">
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                </div>
                <div class="cube diydiv">
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                </div>
                <div class="cube diydiv">
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                </div>
                <div class="cube diydiv">
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                </div>
                <div class="cube diydiv">
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                  <div class="cube__face diydiv"></div>
                </div>
              </div>
              <div class="comp-3d comp-3d--o diydiv">
                <div class="pos diydiv">
                  <div class="cube diydiv">
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                  </div>
                </div>
                <div class="pos diydiv">
                  <div class="cube diydiv">
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                  </div>
                </div>
                <div class="pos diydiv">
                  <div class="cube diydiv">
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                  </div>
                </div>
                <div class="pos diydiv">
                  <div class="cube diydiv">
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                  </div>
                </div>
                <div class="pos diydiv">
                  <div class="cube diydiv">
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                  </div>
                </div>
                <div class="pos diydiv">
                  <div class="cube diydiv">
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                  </div>
                </div>
                <div class="pos diydiv">
                  <div class="cube diydiv">
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                  </div>
                </div>
                <div class="pos diydiv">
                  <div class="cube diydiv">
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                    <div class="cube__face diydiv"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- <img
            class="d2-home__loading"
            src="./image/loading/loading-spin.svg"
            alt="loading"> -->
        </div>
      </div>
    </div>
    <script>
      window.SITE_CONFIG = {};
      window.SITE_CONFIG['version'] = '<%= process.env.VUE_APP_VERSION %>';     // 版本
      window.SITE_CONFIG['nodeEnv'] = '<%= process.env.VUE_APP_NODE_ENV %>';    // node env
      window.SITE_CONFIG['apiURL'] = '<%= process.env.VUE_APP_API %>';          // api请求地址
      window.SITE_CONFIG['storeState'] = {};                                    // vuex本地储存初始化状态（用于不刷新页面的情况下，也能重置初始化项目中所有状态）
      window.SITE_CONFIG['contentTabDefault'] = {                               // 内容标签页默认属性对象
        'name': '',                                                             // 名称, 由 this.$route.name 自动赋值（默认，名称 === 路由名称 === 路由路径）
        'params': {},                                                           // 参数, 由 this.$route.params 自动赋值 
        'query': {},                                                            // 查询参数, 由 this.$route.query 自动赋值 
        'menuId': '',                                                           // 菜单id（用于选中侧边栏菜单，与this.$store.state.sidebarMenuActiveName进行匹配）
        'title': '',                                                            // 标题
        'isTab': true,                                                          // 是否通过tab展示内容?
        'iframeURL': ''                                                         // 是否通过iframe嵌套展示内容? (以http[s]://开头, 自动匹配)
      };
      window.SITE_CONFIG['menuList'] = [];                                      // 左侧菜单列表（后台返回，未做处理）
      window.SITE_CONFIG['permissions'] = [];                                   // 页面按钮操作权限（后台返回，未做处理）
      window.SITE_CONFIG['dynamicRoutes'] = [];                                 // 动态路由列表
      window.SITE_CONFIG['dynamicMenuRoutes'] = [];                             // 动态(菜单)路由列表
      window.SITE_CONFIG['dynamicMenuRoutesHasAdded'] = false;                  // 动态(菜单)路由是否已经添加的状态标示（用于判断是否需要重新拉取数据并进行动态添加操作）
    </script>
  </body>
</html>
